<template>
    <div  class="header-wrapper" ref="wrap">
        <!-- 顶部 -->
        <div class="wrap" >
            <h1 class="logo" @click="GoHome"></h1>
            <ul>
                <li @click="GoHome" :class="{ active: isActive == 1 }">
                    发现音乐
                    <div :class="{ cor1: isActive == 1 }" v-show="isActive == 1"></div>
                </li>
                <li @click="MyMusic" :class="{ active: isActive == 2 }">
                    我的音乐
                    <div :class="{ cor2: isActive == 2 }" v-show="isActive == 2"></div>
                </li>
                <li  :class="{ active: isActive == 3 }">
                    下载客户端
                    <div :class="{ cor4: isActive == 3 }" v-show="isActive == 3"></div>
                </li>
                <i class="hot"></i>
            </ul>
            <a class="login pointer" @click="getCode" v-if="!isLogin"><em>登录</em></a>
            <div class="loginSuccess" v-else>
                <img :src="userImg" v-show="userImg != ''" @mouseenter="showUserBox" />
            </div>
            <a class="creater" href="http://47.96.251.102:3000/" target="_blank">创作者中心</a>
            <input
                    v-model="searchText"
                    type="text"
                    placeholder="音乐/用户"
                    class="search"
                    onfocus="this.placeholder=''"
                    @focus="openSearch"
                    onblur="this.placeholder='音乐/用户'"
                    @blur="closeSearch"
                    @keyup.enter="Search"
            />
            <div class="u-lst clearfix" style="display:none" ref="ulst">
                <div class="schlist">
                    <p class="note">
                        <a class="underline">搜索"{{searchText}}"相关用户&gt;</a>
                    </p>
                    <div class="rap clearfix">
                        <div class="item clearfix">
                            <ul class="clearfix" v-for="item,index in searchList.order" :key="index">
                                <div class="hd clearfix">
                                    <i class="songs" v-show="item=='songs'"></i>
                                    <i class="artists" v-show="item=='artists'"></i>
                                    <i class="albums" v-show="item=='albums'"></i>
                                    <i class="playlists" v-show="item=='playlists'"></i>
                                    <span v-show="item=='songs'">单曲</span>
                                    <span v-show="item=='artists'">歌手</span>
                                    <span v-show="item=='albums'">专辑</span>
                                    <span v-show="item=='playlists'">歌单</span>
                                </div>
                                <div class="odd clearfix">
                                    <li v-for="attr,index in searchList[`${item}`]" :key="index">
                                        <i class="over" @click="goSearch(item,attr.id)">
                                            {{attr.name}}-
                                            <span v-show="item=='songs'" v-for="t,index in attr.artists" :key="index">{{t.name}} </span>
                                            <span v-if="item == 'albums'">{{attr.artist.name}}</span>
                                        </i>
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 登录弹框 -->
        <div class="loginBox" v-show="isShowLogin">
            <!-- 登录栏顶部 -->
            <div class="loginBoxTopBar">
                <span v-if="!phoneLogin && !isRegister">登录</span>
                <span v-if="phoneLogin">手机号登录</span>
                <span v-if="isRegister">注册</span>
                <div class="closeLoginBox" @click="closeLoginBox">x</div>
            </div>
            <!-- 二维码登录 -->
            <div class="loginBoxWithCode" v-if="loginWithCode && !phoneLogin">
                <div style="width: 100%; height: 220px">
                    <div class="phonE"></div>
                    <div class="qR">
                        <span style="margin-left: 40px">邮箱登录</span>
                        <div style="margin-top: 20px">
                            <el-form label-width="70px" ref="emailForm" :model="emailModel" :rules="validatorEmailRules">
                                <el-form-item label="账号:" prop="email">
                                    <el-input type="email"  placeholder="请输入邮箱"  size="small" v-model="emailModel.email" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码:">
                                    <el-input type="password"  placeholder="请输入密码"  size="small" v-model="emailModel.password" show-password></el-input>
                                </el-form-item>
                            </el-form>
                            <!-- 切换至密码登录 -->
                            <div class="changeLoginWay2">
                                <div style="margin-left: 70px">
                                    <input type="checkbox" />
                                    <span>自动登录</span>
                                </div>
                                <a @click="registerUser">注册账号</a>
                            </div>
                            <button class="login_btn_email" ref="loginButtonEmail" @click="loginWithEmail">登录</button>
                        </div>

                    </div>
                </div>
                <div class="changE">
                    <span @click="changeLoginToPhone">选择其他方式登录</span>
                </div>
            </div>
            <!-- 手机号登录与注册 -->
            <div class="loginBoxWithPhone" v-else-if="!loginWithCode && !phoneLogin && !isRegister">
                <div class="loginBoxWithPhoneMainer" style="margin-top: 45px">
                    <div class="loginBoxWithPhoneLeft">
                        <div class="phoneImg">
                            <img src="./image/login_phone.png" />
                        </div>
                        <div href="" class="loginWithPhone pointer" @click="loginWithPhone" style="margin-top: 8px">
                            手机号登录
                        </div>
                        <div href="" class="registerWithPhone pointer" @click="registerWithPone" style="margin-top: 8px">
                            注册
                        </div>
                    </div>
                    <div class="loginBoxWithPhoneRight">
                        <li>
                            <div class="wechatLogo"></div>
                            <span class="pointer">微信登录（待定）</span>
                        </li>
                        <li>
                            <div class="qqLogo"></div>
                            <span class="pointer">QQ登录（待定）</span>
                        </li>
                        <li @click="changeLoginToCode">
                            <div class="emailLogo"></div>
                            <span class="pointer">邮箱账号登录</span>
                        </li>
                    </div>
                </div>
                <div class="loginBoxWithPhoneBottom" style="margin-top: 60px">
                    <input type="checkbox" v-model="agree" />
                    <span>同意</span>
                    <a
                    >《服务条款》</a
                    >
                    <a
                    >《隐私策略》</a
                    >
                    <a
                    >《儿童隐私政策》</a
                    >
                </div>
                <div class="loginBoxWithPhoneFooter pointer" @click="changeLoginToCode">
                    <img src="./image/qr_login_icon.png" style="width: 100%" />
                </div>
            </div>
            <!--注册页面-->
            <div class="registerWithPhone" v-show="isRegister">

                <div class="register">
                    <!-- 请输入手机号 -->
                    <div class="reg-form">
                        <el-form label-position="right" label-width="90px"  ref="form" :model="model" :rules="validatorRules" status-icon>
                            <el-form-item label="邮箱：" prop="email">
                                <el-input type="email"  placeholder="请输入邮箱" size="small" v-model="model.email" ></el-input>
                            </el-form-item>
                            <el-form-item label="密码：" prop="password">
                                <el-input type="password"  placeholder="密码为8~20位，必须包含字母数字" size="small"  v-model="model.password"  show-password></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码：" prop="checkPass">
                                <el-input type="password"  placeholder="请确认密码" size="small"  v-model="model.checkPass"  show-password></el-input>
                            </el-form-item>
                            <el-form-item label="昵称：" prop="nickname">
                                <el-input type="text"  placeholder="请输入昵称" size="small" v-model="model.nickname" ></el-input>
                            </el-form-item>
                            <el-form-item label="手机号：" prop="mobile" style="margin-top: 8px">
                                <el-input placeholder="请输入手机号" size="small" v-model="model.mobile" >
                                    <template slot="prepend">+86</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="验证码：" prop="captcha" class="captcha-input">
                                <el-input v-model="model.captcha" placeholder="请输入验证码" size="small"></el-input>
                                <div class="captcha-btn"  @click="getCaptcha" v-if="!isGetCaptcha" >获取验证码</div>
                                <div class="captcha" v-else>{{ tip }}</div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="reg-btns" >
                        <div class="reg-btn">
                            <el-button type="primary" size="small" @click="handleSubmitRegister">确认注册</el-button>
                        </div>
                        <div class="reg-btn"  style="margin-left: 0px">
                            <el-button @click="changeLoginHome" type="primary" plain size="small">返回登录</el-button>
                        </div>
                    </div>
                </div>


            </div>
            <!--注册页面-->
            <!-- 手机号登录-->
            <div class="loginWithPhone" v-if="phoneLogin">
                <div class="loginWithPhoneMainer">

                    <!-- 请输入手机号 -->
                    <div class="phoneWrapper">
                        <div class="local">+86</div>
                        <input type="text" placeholder="请输入手机号" v-model="phone" />
                    </div>
                    <!-- 请输入验证码 -->
                    <div class="codeWrapper" v-if="!loginWithPassWord">
                        <input type="text" placeholder="请输入验证码" v-model="code" />
                        <button
                                class="getCodeForPhone"
                                tabindex="-1"
                                :disabled="state.smsSendBtn"
                                @click.stop.prevent="sendCode"
                                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
                        >
                        </button>
                    </div>
                    <!-- 请输入密码 -->
                    <div class="passwordWrapper" v-else>
                        <input
                                type="password"
                                placeholder="请输入密码"
                                v-model="password"
                                @keyup.enter="loginButton"
                        />
                    </div>
                    <!-- 切换至密码登录 -->
                    <div class="changeLoginWay">
                        <a v-if="!loginWithPassWord" @click="changeLoginWay">密码登录</a>
                        <a v-else @click="changeLoginWay">验证码登录</a>
                        <div>
                            <input type="checkbox" />
                            <span>自动登录</span>
                        </div>
                    </div>
                    <!-- 登录按钮 -->
                    <button class="loginButton" @click="loginButton" ref="loginButton">登录</button>
                </div>
                <div class="loginWithPhoneFooter">
                    <div class="changeLoginWayInPhoneBox pointer" @click="otherLogin">
                        &lt;&nbsp;&nbsp;<span style="color: #0c73c2;font-size: larger">其他登录方式</span>
                    </div>
                    <div class="registerText pointer" @click="registerWithPone">
                        没有账号?&nbsp;免费注册&nbsp;&nbsp;&gt;
                    </div>
                </div>
            </div>
        </div>

        <!-- 遮罩层 -->
        <div class="mask" v-show="isShowLogin"></div>
        <!-- 用户属性框 -->
        <div class="userBox notChoose" ref="userBox" @mouseleave="hideUserBox">
            <li>
                <i class="el-icon-user"></i>
                <router-link to="/user/home">我的主页</router-link>
            </li>
            <li>
                <i class="el-icon-message"></i>
                <a>我的消息</a>
            </li>
            <li>
                <i class="el-icon-s-tools"></i>
                <router-link to="/user/personage">个人设置</router-link>
            </li>
            <li>
                <i class="el-icon-medal"></i>
                <router-link to="/user/level">我的等级</router-link>
            </li>
            <li @click="exit">
                <i class="el-icon-switch-button"></i>
                <a>退出登录</a>
            </li>
        </div>
        <!-- 用户属性框 -->
    </div>
</template>

<script>

    export default {
        name: "Header",
        data() {
            return {

                isGetCaptcha: false, //是否获取验证码
                tip: "", //获取验证码后的文字提示
                //手机号登录用
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                model: {},
                emailModel:{
                    email: '',
                    password: ''
                },
                validatorEmailRules: {
                    email: [
                        { validator: this.handleEmailCheckExist, trigger: "blur", required: false },
                    ]
                },
                validatorRules: {
                    mobile: [
                        { validator: this.handlePhoneCheck, trigger: "blur", required: true },
                    ],
                    email: [
                        { validator: this.handleEmailCheck, trigger: "blur", required: true },
                    ],
                    password:[
                        { validator: this.handlePassword, trigger: "blur", required: true },
                    ],
                    checkPass:[
                        { validator: this.handlePasswordCheck, trigger: "blur", required: true },
                    ],
                    nickname: [
                        { validator: this.handleNicknameCheck, trigger: "blur", required: true },
                    ]
                },
                // 是否展示登录框
                isShowLogin: false,
                // 顶部选择
                isActive: 0,
                // 二维码登录
                loginWithCode: true,
                // 二维码
                qrUrl: "",
                // 是否勾选同意协议
                agree: false,
                // 是否更新二维码
                isUpdata: false,
                // 手机登录栏
                phoneLogin: false,
                isRegister: false,
                // 定时器检查二维码状态
                timer: function () {},
                // 手机号
                phone: "",
                // 密码
                password: "",
                // 验证码
                code: "",
                // 密码登录
                loginWithPassWord: false,
                // 是否登录
                isLogin: false,
                // 用户头像
                userImg: "",
                // 搜索内容
                searchText:'',
                // 搜索建议返回的结果
                searchList:{},
            };
        },
        methods: {
            async loginWithEmail(){
                let _this = this;
                var params = {
                    email: this.emailModel.email,
                    password: this.emailModel.password
                };
                const res = await this.$API.reqCellEmailByPassword(params.email,params.password);
                if (res.success && res.code===200) {
                    _this.$store.commit('UPDATETOKEN',res.result.cookie);
                    _this.$store.commit('UPDATEUSERINFO',res.result.account.id);
                    this.loadSuccessEmail();
                } else if (!res.success && res.code===402){
                    this.$notify.error({
                        title: '提示',
                        message: '请输入正确的密码！'
                    });
                }else if (!res.success && res.code===401){
                    this.$notify.error({
                        title: '提示',
                        message: '邮箱未注册！'
                    });
                }else {
                    this.$notify.error({
                        title: '错误',
                        message: res.message
                    });
                }
            },

            //验证手机号和验证码是否正确
            async loginButton() {
                let _this = this;
                //验证码
                if (!this.loginWithPassWord){
                    const { phone, code } = this;
                    const obj =  await this.$API.reqCellPhoneByCode(phone, code);
                    if (!obj.success && obj.code===401){
                        this.$notify.warning({
                            title: '提示：',
                            message: '请输入手机号码!'
                        });
                    }else if (!obj.success && obj.code===402){
                        this.$notify.warning({
                            title: '提示：',
                            message: '手机号码未注册!'
                        });
                    }else if (!obj.success && obj.code===403){
                        this.$notify.warning({
                            title: '提示：',
                            message: '手机验证码错误!'
                        });
                    }else {
                        _this.$store.commit('UPDATETOKEN',obj.result.cookie);
                        _this.$store.commit('UPDATEUSERINFO',obj.result.account.id);
                        this.loadSuccess();
                    }
                }
                //手机密码
                else {
                    const { phone, password } = this;
                    const obj =  await this.$API.reqCellPhoneByPassword(phone, password);
                    if (!obj.success && obj.code===401){
                        this.$notify.warning({
                            title: '提示：',
                            message: '请输入手机号码和密码!'
                        });
                    }else if (!obj.success && obj.code===402){
                        this.$notify.warning({
                            title: '提示：',
                            message: '手机号码未注册!'
                        });
                    }else if (!obj.success && obj.code===403){
                        this.$notify.warning({
                            title: '提示：',
                            message: '密码错误!'
                        });
                    }else {
                        _this.$store.commit('UPDATETOKEN',obj.result.cookie);
                        _this.$store.commit('UPDATEUSERINFO',obj.result.account.id);
                        this.loadSuccess();
                    }
                }

            },
            loadSuccess(){
                this.$store.dispatch('getUserSonglist');
                this.$notify({
                    message: '登陆成功！',
                    type: 'success',
                });
                this.$store.dispatch('updateLogin',true);
                let index = 5;
                this.$refs.loginButton.innerHTML = "登录中...";
                let timer = setInterval(() => {
                    if (localStorage.getItem("COOKIE") != null) {
                        this.isShowLogin = false;
                        this.isLogin = true;
                        index--;
                        if (index <= 0) {
                            clearInterval(timer);
                        }
                    }
                }, 1000);
                timer = setInterval(()=>{
                    location.reload();
                    this.$refs.loginButton.innerHTML = "登录成功!";
                    clearInterval(timer);
                },500);
                this.$refs.loginButton.innerHTML = "登录";

            },
            loadSuccessEmail(){
                let index = 7;
                this.$store.dispatch('updateLogin',true);
                this.$store.dispatch('getUserSonglist');
                this.$refs.loginButtonEmail.innerHTML = "登录中...";
                let timer = setInterval(() => {
                    if (localStorage.getItem("COOKIE") != null) {
                        this.isShowLogin = false;
                        this.isLogin = true;
                        index--;
                        if (index <= 0) {
                            clearInterval(timer);
                        }
                    }
                }, 1000);
                timer = setInterval(()=>{
                    location.reload();
                    this.$refs.loginButtonEmail.innerHTML = "登录成功!";
                    clearInterval(timer);
                },500);
                this.$refs.loginButtonEmail.innerHTML = "登录";

            },
            handleEmailCheckExist(rule, value, callback){
                var reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
                if(!reg.test(value)){
                    callback(new Error("请输入正确格式的邮箱地址"))
                }else {
                    var params = {
                        email: value,
                    };
                    this.$API.checkExistUser(params).then((res) => {
                        if (res.success) {
                            callback()
                        } else {
                            callback("邮箱未注册!")
                        }
                    })
                }

            },
            handlePhoneCheck(rule, value, callback) {
                var reg=/^1[3456789]\d{9}$/
                if(!reg.test(value)){
                    callback(new Error("请输入正确手机号"))
                }else{
                    var params = {
                        telephone: value,
                    };
                    this.$API.checkOnlyUser(params).then((res) => {
                        if (res.success) {
                            callback()
                        } else {
                            callback("手机号已存在!")
                        }
                    })
                }
            },
            handleEmailCheck(rule, value, callback) {
                var reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
                if(!reg.test(value)){
                    callback(new Error("请输入正确格式的邮箱地址"))
                }else {
                    let params = {
                        email: value,
                    };
                    this.$API.checkOnlyUser(params).then((res) => {
                        if (res.success) {
                            callback()
                        } else {
                            callback("邮箱已存在!")
                        }
                    })
                }

            },
            handlePassword(rule, value, callback) {
                var reg =  /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
                if(!reg.test(value)){
                    callback(new Error("密码为8~20位，必须包含字母数字"))
                }else {
                    callback()
                }
            },
            handlePasswordCheck(rule, value, callback) {
                let password = this.model.password
                //console.log('value', value)
                if (value && password && value.trim() !== password.trim()) {
                    callback(new Error('两次密码不一致'))
                }
                callback()
            },
            handleNicknameCheck(rule, value, callback) {
                let params = {
                    nickname: value,
                };
                this.$API.checkOnlyUser(params).then((res) => {
                    if (res.success) {
                        callback()
                    } else {
                        callback("用户昵称已存在!")
                    }
                })

            },
            GoHome() {
                if(this.$route.path == '/home/discover')
                    return ;
                this.isActive = 1;
                this.$router.push("/home/discover");
            },
            MyMusic() {
                if (this.isActive == 2) return;
                this.isActive = 2;
                this.$router.push("/mymusic/playlist");
            },
            Friend() {
                if (this.isActive == 3) return;
                this.isActive = 3;
                this.$router.push("/friend");
            },
            Change() {},
            //关闭登录弹窗
            closeLoginBox() {
                this.isShowLogin = false;
                clearInterval(this.timer);
            },
            // 点击获取验证码
            getCaptcha() {
                let that = this
                // 检测手机号码是否输入
                if (this.model.mobile === ""||this.model.mobile === undefined){
                    this.$notify({
                        title: '警告',
                        message: '先输入手机号码',
                        type: 'warning',
                    });
                }else {
                    const params = {
                        mobile: this.model.mobile,
                        smsmode: "1"
                    };
                    console.log(this.model.mobile);
                    this.$API.smsRegister(params).then(res => {
                        switch (res.code) {
                            case 0:
                                setTimeout(() => {
                                },80);
                                this.$notify({
                                    showClose: true,
                                    message: "验证码已发送",
                                    type: "success",
                                });
                                this.isGetCaptcha = true;
                                let count = 60;
                                this.tip = `请${count}秒后再获取`;
                                let timerC = setInterval(() => {
                                    count--;
                                    this.tip = `请${count}秒后再获取`;
                                    if (count === 0) {
                                        this.isGetCaptcha = false;
                                        clearInterval(timerC);
                                    }
                                }, 1000);

                                break;
                            default:
                                this.registerFailed(res.message)
                                break;
                        }
                    });
                }

            },
            //发送验证码
            sendCode(e) {
                e.preventDefault();
                // 检测手机号码是否输入
                if (this.phone === ""||this.phone === undefined){
                    this.$notify({
                        title: '警告',
                        message: '先输入手机号码',
                        type: 'warning',
                    });
                }else {
                    let that = this;
                    that.state.smsSendBtn = true;
                    let interval = window.setInterval(() => {
                        if (that.state.time-- <= 0) {
                            that.state.time = 60;
                            that.state.smsSendBtn = false;
                            window.clearInterval(interval);
                        }
                    }, 1000);

                    let smsParams = {};
                    smsParams.mobile=this.phone;
                    smsParams.smsmode="0";
                    that.$API.smsRegister(smsParams)
                        .then(res => {
                            if(!res.success){
                                that.cmsFailed(res);
                            }
                            console.log(res);
                        })
                        .catch(err => {
                            clearInterval(interval);
                            that.state.time = 60;
                            that.state.smsSendBtn = false;
                            that.requestFailed(err);
                        });
                }

            },
            cmsFailed(err){
                this.$notify.error({
                    title: '获取验证码失败',
                    message: err.message,
                    duration: 4000,
                });
            },
            requestFailed (err) {
                this.$notify.error({
                    title: '登录失败',
                    message: err,
                    duration: 4000,
                });
            },

            registerFailed(message) {
                this.$notify({
                    title: "注册失败",
                    message: message,
                    type: "warning",
                });

            },
            handleSubmitRegister() {
                let values = this.model
                let register = {
                    nickname: values.nickname,
                    password: values.password,
                    phone: values.mobile,
                    email: values.email,
                    smscode: values.captcha
                };
                this.$API.registerUser(register).then((res) => {
                    if (!res.success) {
                        this.registerFailed(res.message)
                    } else {
                        this.model= {};
                        this.getCode();
                        this.$notify({
                            title: '成功',
                            message: res.message,
                            type: 'success'
                        });
                    }
                })
            },
            //获取二维码
            async getCode() {
                //生成二维码
                this.isUpdata = false;
                this.isShowLogin = true;
                this.isRegister = false;
                this.phoneLogin = false;
                this.loginWithCode = true;
            },
            //检查二维码状态

            //切换至其他方式登录
            changeLoginToPhone() {
                this.loginWithCode = false;
                clearInterval(this.timer);
            },
            registerUser(){
                this.model = {};
                this.loginWithCode = false;
                this.phoneLogin = false;
                this.isRegister = true;
                clearInterval(this.timer);
            },
            //切换至二维码登录
            changeLoginToCode() {
                const h = this.$createElement;
                if (this.agree == false) {
                    this.$notify({
                        message: h('i', { style: 'color: teal'}, '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》'),
                        title: '消息',
                        type: 'warning'
                    });
                    return;
                }
                this.loginWithCode = true;
                this.getCode();
            },
            //检查是否勾选了协议
            checkAgree() {
                const h = this.$createElement;
                if (this.agree == false) {
                    this.$notify({
                        message: h('i', { style: 'color: teal'}, '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》'),
                        title: '消息',
                        type: 'warning'
                    });
                    return;
                }
            },
            //手机号登录
            loginWithPhone() {
                const h = this.$createElement;
                if (this.agree == false) {
                    this.$notify({
                        message: h('i', { style: 'color: teal'}, '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》'),
                        title: '消息',
                        type: 'warning'
                    });
                    return;
                }
                this.phoneLogin = true;
            },
            //切换至注册页面
            registerWithPone() {
                const h = this.$createElement;
                if (this.agree == false) {
                    this.$notify({
                        message: h('i', { style: 'color: teal'}, '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》'),
                        title: '消息',
                        type: 'warning'
                    });
                    return;
                }
                this.phoneLogin = false;
                this.isRegister = true;
                clearInterval(this.timer);
            },
            changeLoginHome(){
                this.isRegister = false;
                this.phoneLogin = false;
                this.loginWithCode = true;

            },
            //切换登录方式（密码登录和验证码登录）
            changeLoginWay() {
                this.loginWithPassWord = !this.loginWithPassWord;
            },
            //切换其他登录方式（手机号登录界面）
            otherLogin() {
                this.phoneLogin = false;
                this.password = "";
                this.phone = "";
                this.code = "";
            },
            //检查手机号格式是否正确
            checkFhone() {
                let re = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;
                return re.test(this.phone);
            },

            //获取账号信息
            async Account() {
                const result = await this.$API.reqAccount(localStorage.getItem('COOKIE'));
                console.log(result);
            },
            //展示个人选项盒子
            showUserBox() {
                let userBox = this.$refs.userBox;
                userBox.style = "display:block";
            },
            //隐藏个人选项盒子
            hideUserBox() {
                let userBox = this.$refs.userBox;
                userBox.style = "display:none";
            },
            //退出登录
            exit() {
                this.$store.dispatch("exit");
                this.hideUserBox();
                this.$notify({
                    message: "注销成功",
                    type: "success",
                });
                if (this.$route.path ==='/user/home'){
                    this.isActive = 1;
                    this.$router.push("/home/discover");
                }else if (this.$route.path ==='/user/level'){
                    this.isActive = 1;
                    this.$router.push("/home/discover");
                }
                let timer = setInterval(() => {
                    if (localStorage.getItem("COOKIE") == null) {
                        index--;
                        if (index <= 0) {
                            clearInterval(timer);
                        }
                    }
                }, 1000);
                timer = setInterval(()=>{
                    location.reload();
                    clearInterval(timer);
                },500);

            },
            //刷新登录状态
            async refreshLogin() {

            },
            //获取isActive的值
            getActive(){
                //通过当前路径得知active是哪一个
                setTimeout(() => {
                    let path = this.$route.path;
                    if(path.indexOf('home/') != -1) this.isActive = 1;
                    else if(path.indexOf('mymusic') != -1) this.isActive = 2;
                    else if(path.indexOf('friend') != -1) this.isActive = 3;
                    else if(path.indexOf('download') != -1) this.isActive = 4;
                    else this.isActive = -1;
                },80);
            },
            // 获取搜索建议
            async getSearchSuggest(){
                let obj = await this.$API.reqSerachSuggest(this.searchText);
                this.searchList = obj.result;
            },
            // 打开搜索框
            openSearch(){
                if(this.searchText != ''){
                    this.$refs.ulst.style.display = 'block'
                }
            },
            // 关闭搜索框
            closeSearch(){
                setTimeout(() => {
                    this.$refs.ulst.style.display='none';
                }, 100);
            },
            // 搜索
            goSearch(path,id){
                path = path.substr(0,path.length-1);
                if(path == 'artist') path='artist/song';
                this.$router.push({
                    path:`/${path}`,
                    query:{
                        id
                    }
                })
            },
            Ceater() {},
            Search() {
                this.$refs.ulst.style.display = 'none';
                this.$router.push({
                    path:'/search',
                    query:{
                        keywords:this.searchText,
                    }
                })
            },
        },
        computed:{
            path(){
                return this.$route.path;
            }
        },
        watch: {
            path(){
                if(this.$route.path.indexOf('/mymusic') != -1) this.$refs.wrap.style="position:fixed";
                else this.$refs.wrap.style="position:relative";
                this.getActive();
            },
            searchText(){
                if(this.searchText != ''){
                    this.getSearchSuggest();
                    this.$refs.ulst.style.display = 'block';
                }
                else{
                    this.$refs.ulst.style.display = 'none';
                }
            }
        },
        mounted() {
            this.getActive();
            if (this.$store.state.login.userId != null) {
                this.isLogin = true;
                // this.refreshLogin();
                this.$store.dispatch("getUserInfo", this.$store.state.login.userId);
                setTimeout(() => {
                    this.userImg = this.$store.state.login.userInfo.profile.avatarUrl;
                }, 800);
            }
            this.$bus.$on('appear',()=>{
                this.getCode();
            });
            // this.Account();
            // console.log(this.$bus);
        },
    }
</script>

<style lang = 'less' scoped>
    body {
        .register {
            h2 {
                margin-top: 10px;
            }
            .reg-form {
                width: 70%;
                margin-top: 10px;
                margin-left: 15%;
                padding-right: 20px;
                .el-form-item {

                }
                .captcha-input {
                    position: relative;
                    .captcha-btn {
                        position: absolute;
                        right: 5px;
                        top: 0;
                        cursor: pointer;
                        font-size: 14px;
                        color: dodgerblue;
                    }
                    .captcha {
                        position: absolute;
                        right: 5px;
                        top: 0;
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
            .reg-btns {
                width: 250px;
                display: flex;
                justify-content: space-between;
                margin: 20px auto 12px;
                transform: translateX(18px);
                .reg-btn {
                    width: 48%;
                }
            }
            /deep/ .el-form-item__label {
                padding-right: 5px;
            }
        }
        color: #333;
        font-family: Arial, Helvetica, sans-serif;
        -webkit-text-size-adjust: none;
        .header-wrapper {
            width: 100%;
            height: 70px;
            z-index: 1000;
            position: relative;
            top:0;
            background: #242424;
            border-bottom: 1px solid #000;
            .wrap {
                width: 1100px;
                height: 100%;
                margin: 0 auto;
                .logo {
                    float: left;
                    width: 177px;
                    height: 69px;
                    padding-right: 20px;
                    line-height: 70px;
                    background: url("./image/topbar01.png") no-repeat;
                    &:hover {
                        cursor: pointer;
                    }
                }
                >ul {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    height: 100%;
                    line-height: 70px;
                    text-align: center;
                    color: #ccc;
                    float: left;
                    li {
                        float: left;
                        padding: 0 19px;
                        width: auto;
                        font-size: 14px;
                        position: relative;
                    }
                    li:hover {
                        cursor: pointer;
                        background-color: #000;
                    }
                    .hot {
                        float: left;
                        padding: 0 19px;
                        width: auto;
                        font-size: 14px;
                        background: url("./image/topbar.png") no-repeat -180px -0px;
                        width: 28px;
                        height: 19px;
                        position: relative;
                        left: -20px;
                        top: 20px;
                    }
                }
                .search {
                    background: url("./image/topbar.png") no-repeat 0px -99px;
                    background-color: #fff;
                    width: 158px;
                    height: 32px;
                    float: right;
                    margin-top: 19px;
                    padding-left: 30px;
                    border-radius: 32px;
                    font-size: 12px;
                }
                .creater {
                    width: 90px;
                    height: 32px;
                    padding-left: 5px;
                    border: 1px solid #4f4f4f;
                    text-align: center;
                    line-height: 30px;
                    font-size: 12px;
                    border-radius: 20px;
                    margin-top: 19px;
                    margin-left: 12px;
                    float: right;
                    color: #ccc;
                    &:hover {
                        cursor: pointer;
                        border-color: #fff;
                        color: #fff;
                    }
                }
                .login {
                    float: right;
                    width: 50px;
                    height: 45px;
                    padding-right: 22px;
                    margin-top: 19px;
                    margin-left: 20px;
                    font-size: 12px;
                    line-height: 30px;

                    &:hover {
                        color: #787878;
                        text-decoration: underline;
                    }
                }
                .loginSuccess {
                    float: right;
                    width: 50px;
                    height: 45px;
                    padding-right: 22px;
                    margin-top: 19px;
                    margin-left: 20px;
                    font-size: 12px;
                    line-height: 30px;

                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }
                }
                .u-lst{
                    position: absolute;
                    top: 59px;
                    width: 240px;
                    z-index: 120;
                    left: 980px;
                    box-sizing: border-box;
                    border: 1px solid #bebebe;
                    border-radius: 4px;
                    background: #fff;
                    box-shadow: 0 4px 7px #555;
                    text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
                    .schlist{
                        width: 100%;
                        .note{
                            width: 100%;
                            padding: 11px 10px;
                            height: 39px;
                            border-bottom: 1px solid #979797;
                            a{
                                color: #000;
                                &:hover{
                                    color: #000;
                                }
                            }
                        }
                        .rap{
                            width: 100%;
                            .item{
                                width: 100%;
                                display: block;
                                ul{
                                    width: 100%;
                                    .hd{
                                        float: left;
                                        width: 63px;
                                        padding: 10px 0 0 10px;
                                        i{
                                            float: left;
                                            margin: 2px 4px 0 0;
                                            width: 14px;
                                            height: 15px;
                                            background: url('../images/icon.png');
                                        }
                                        .songs{
                                            background-position: -35px -300px;
                                        }
                                        .artists{
                                            background-position: -50px -300px;
                                        }
                                        .albums{
                                            background-position: -35px -320px;
                                        }
                                        .playlists{
                                            background-position: -50px -320px;
                                        }
                                        span{
                                            line-height: 15px;
                                            text-align: left;
                                            font-size: 12px;
                                        }
                                    }
                                    .odd{
                                        float: left;
                                        width: 173px;
                                        background: #f9f8f8;
                                        margin-left: 2px;
                                        margin-top: 0px;
                                        padding: 6px 0 5px;
                                        border-top: 1px solid #e2e2e2;
                                        border-left: 1px solid #e2e2e2;
                                        li{
                                            width: 100%;

                                            i{
                                                padding-left: 10px;
                                                display: block;
                                                height: 24px;
                                                color: #000;
                                                line-height: 24px;
                                                &:hover{
                                                    color: #000;
                                                    background-color: #ddd;
                                                    cursor: pointer;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .active {
                background-color: #000;
                color: #fff;
            }
            .cor1,
            .cor2,
            .cor3,
            .cor4 {
                width: 12px;
                height: 7px;
                background: url("./image/topbar.png") no-repeat -216px -140px;
                position: absolute;
                top: 63px;
            }
            .cor1 {
                left: 43px;
            }
            .cor2 {
                left: 43px;
            }
            .cor3 {
                left: 29px;
            }
            .cor4 {
                left: 50px;
            }
        }
        .loginBox {
            width: 580px;
            height: 475px;
            position: fixed;
            z-index: 2001;
            left: 503px;
            top: 191px;
            box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
            border-radius: 5px;
            background: #fff;
            .loginBoxTopBar {
                width: 580px;
                height: 38px;
                padding-left: 18px;
                padding-right: 45px;
                background: #2d2d2d;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                span {
                    font-size: 14px;
                    color: #fff;
                    font-weight: bold;
                    line-height: 38px;
                }

                .closeLoginBox {
                    width: 20px;
                    height: 20px;
                    position: relative;
                    left: 525px;
                    top: -30px;
                    text-align: center;
                    line-height: 20px;
                    font-size: 18px;
                    color: #787878;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
            .loginBoxWithCode {
                padding-top: 38px;
                .phonE {
                    width: 160px;
                    height: 220px;
                    margin-left: 16px;
                    background: url("./image/login_yx.png") no-repeat;
                    background-size: 100%;
                    margin-top: 20%;
                    float: left;
                }
                .qR {
                    width: 350px;
                    height: 205px;
                    margin-top: 20px;
                    margin-left: 0px;
                    float: left;
                    text-align: center;
                    font-size: 18px;
                    color: #333;
                    .changeLoginWay2 {
                        display: flex;
                        margin-top: 30px;
                        justify-content: space-between;
                        font-size: 13px;
                        a {
                            color: rgb(57, 136, 211);
                            &:hover {
                            }
                        }
                    }
                    .login_btn_email {
                        width: 80%;
                        height: 30px;
                        margin-left: 65px;
                        margin-top: 12px;
                        background: rgb(57, 136, 211);
                        border-radius: 6px;
                        color: #fff;
                    }
                    .updateCode {
                        position: absolute;
                        height: 50px;
                        line-height: 50px;
                        border: 1px solid black;
                        font-size: 12px;
                        background: rgba(255, 255, 255, 0.9);
                        top: 160px;
                        left: 280px;

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    img {
                        height: 134px;
                        padding: 4px;
                        margin: 13px 31px;
                    }
                }
                .changE {
                    width: 118px;
                    height: 28px;
                    margin: 120px auto;
                    border: 1px solid #979797;
                    border-radius: 15px;
                    text-align: center;
                    line-height: 24px;
                    span {
                        font-size: 12px;
                    }
                    &:hover {
                        cursor: pointer;
                    }
                }
            }
            .loginBoxWithPhone {
                padding-top: 40px;
                padding-bottom: 39px;
                width: 528px;
                height: 253px;

                .loginBoxWithPhoneMainer {
                    width: 528px;
                    height: 205px;

                    .loginBoxWithPhoneLeft {
                        width: 300px;
                        height: 205px;
                        padding: 0 35px 3px 40px;
                        border-right: 1px solid rgba(0, 0, 0, 0.2);
                        float: left;
                        .phoneImg {
                            width: 224px;
                            height: 120px;

                            img {
                                float: left;
                                width: 203px;
                                height: 107px;
                                display: block;
                                margin-left: 10px;
                            }
                        }

                        .loginWithPhone,
                        .registerWithPhone {
                            -webkit-user-select: none;
                            -moz-user-select: none;
                            -ms-user-select: none;
                            user-select: none;
                            position: relative;
                            display: block;
                            width: 224px;
                            height: 31px;
                            padding-right: 5px;
                            border-radius: 5px;
                            line-height: 31px;
                            text-align: center;
                            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
                        }
                        .loginWithPhone {
                            top: 20px;
                            background-color: rgb(57, 136, 211);
                            color: #fff;
                            &:hover {
                                background-color: rgb(82, 153, 221);
                            }
                        }
                        .registerWithPhone {
                            top: 30px;
                            background-color: rgb(246, 246, 246);
                            color: rgb(51, 51, 51);
                            &:hover {
                                background-color: rgb(253, 253, 253);
                            }
                        }
                    }

                    .loginBoxWithPhoneRight {
                        float: left;
                        width: 187px;
                        height: 216px;
                        padding: 3px 0 3px 39px;

                        li {
                            width: 148px;
                            height: 38px;
                            margin: 39px;
                            margin: 15px 0 0 0;
                            float: left;
                            line-height: 38px;
                            div {
                                float: left;
                                width: 38px;
                                height: 38px;
                                margin-right: 14px;
                            }
                            .wechatLogo {
                                background: url("./image/logo.png") no-repeat -150px -670px;
                            }
                            .qqLogo {
                                background: url("./image/logo.png") no-repeat -190.5px -670px;
                            }
                            .weiboLogo {
                                background: url("./image/logo.png") no-repeat -231px -670px;
                            }
                            .emailLogo {
                                background: url("./image/logo.png") no-repeat -271px -670px;
                            }
                        }
                    }
                }

                .loginBoxWithPhoneBottom {
                    margin-top: 40px;
                    padding-left: 40px;

                    input {
                        margin-right: 5px;
                        &:hover {
                            cursor: pointer;
                        }
                    }

                    a {
                        color: rgb(82, 153, 221);

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .loginBoxWithPhoneFooter {
                    width: 52px;
                    height: 52px;
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                }
            }
            .loginWithPhoneMainer {
                width: 280px;
                height: 250px;
                padding: 30px 0 43px 0;
                margin: 10% auto;

                .phoneWrapper,
                .codeWrapper,
                .passwordWrapper {
                    width: 100%;
                    height: 36px;
                    margin-bottom: 12px;
                    font-size: 12px;
                }
                .el-input-email {
                    border: 1px solid #F5F7FA;
                    padding: 5px 0 5px 10px;
                    flex-grow: 2;
                    border-radius: 5px;

                }

                .phoneWrapper {
                    display: flex;
                    .local {
                        flex-grow: 1;
                        border: 1px solid #cdcdcd;
                        border-right: none;
                        text-align: center;
                        line-height: 36px;
                        color: #000;
                        font-size: 15px;
                        border-radius: 5px;
                    }
                    input {
                        border: 1px solid #cdcdcd;
                        padding: 5px 0 5px 10px;
                        flex-grow: 2;
                        border-radius: 5px;
                    }
                }

                .codeWrapper {
                    display: flex;
                    justify-content: space-between;
                    input {
                        border: 1px solid #cdcdcd;
                        padding: 5px 0 5px 10px;
                        width: 160px;
                        border-radius: 5px;
                    }

                    .getCodeForPhone {
                        width: 80px;
                        font-size: 12px;
                        border-radius: 5px;
                    }
                }

                .passwordWrapper {
                    padding: 7px 0 5px 10px;
                    border-radius: 5px;
                    border: 1px solid #cdcdcd;
                }

                .changeLoginWay {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 0 10px 0;

                    a {
                        &:hover {
                            color: #666;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }

                .loginButton {
                    width: 100%;
                    height: 33px;
                    background: rgb(57, 136, 211);
                    margin-top: 5px;
                    border-radius: 6px;
                    color: #fff;
                }
            }
            .loginWithPhoneFooter {
                height: 60px;
                width: 100%;
                margin-top: 70px;
                border-top: 1px solid #cdcdcd;
                border-radius: 0 0 4px 4px;
                line-height: 60px;
                background-color: #f7f7f7;
                display: flex;
                justify-content: space-between;
                padding: 0 20px 0 20px;
            }
        }
        .pointer:hover {
            cursor: pointer;
        }
        .mask {
            width: 100%;
            height: 860px;
            position: fixed;
            top: -70px;
            z-index: 2000;
        }
        .userBox {
            width: 160px;
            height: 180px;
            border: 1px solid #202020;
            background: #2b2b2b;
            position: absolute;
            top: 55px;
            right: 334px;
            border-radius: 5px;
            box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.5);
            display: none;

            &:hover {
                display: block;
            }

            li {
                width: 100%;
                height: 34px;
                padding-left: 24px;
                /* line-height: 39px; */

                i {
                    float: left;
                    font-size: 18px;
                    margin-top: 7px;
                    margin-right: 10px;
                }

                a {
                    float: left;
                    height: 34px;
                    line-height: 31px;
                    color: #ccc;
                }

                &:hover {
                    cursor: pointer;
                    background: rgb(53, 53, 53);
                }
            }
        }
        .notChoose {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    }
</style>
